<template>
  <div class="user">
    <div class="user_content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span><router-link :to="`/`">主页</router-link></span>
        </div>
        <img :src="userDetail.avatar_url" alt="" class="userImg">
        <span> {{ this.loginname }}</span>
        <p>7个话题收藏</p>
        <p>个人网址</p>
        <p>上海</p>
        <p>github</p>
        <p>推特</p>
        <p>注册时间</p>
      </el-card>
      <!-- 最近创建的话题 -->

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>最近创建的话题</span>
        </div>
        <p v-for="(item,index) in recent_topics" :key="item.id">
          <router-link :to="`/topic/${item.id}`">{{item.title}}</router-link>
          </p>
      </el-card>
      <!-- 最近参与的话题 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>最近参与的话题</span>
        </div>
      <p v-for="(item,index) in recent_replies" :key="item.id">
        <router-link :to="`/topic/${item.id}`">{{item.title}}</router-link>
      </p>

      </el-card>
    </div>
    <div class="user_sidebar">
      <!-- 个人信息 -->
      <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <div>
        <img :src="userDetail.avatar_url" alt="" style="width:48px;height:48px">
        <span>{{userDetail.loginname}}</span>
        <p class="user_sidebar_score">积分:{{userDetail.score}}</p>
        <p class="user_sidebar_sign">‘这个人很懒，什么都没有留下’</p>
      </div>
    </el-card>
    <!-- 友情社区 -->
      <el-card class="box-card community">
      <div slot="header" class="clearfix">
        <span>友情社区</span>
      </div>
      <div>
        <a href=""><img src="../../assets/images/golangtc-logo.png" alt=""></a>
        <a href=""><img src="../../assets/images/phphub-logo.png" alt=""></a>
        <a href=""><img src="../../assets/images/ruby-china-20150529.png" alt=""></a>
      </div>
    </el-card>
    <!-- 二维码 -->
      <el-card class="box-card QR" >
      <div slot="header" class="clearfix">
        <span>二维码</span>
      </div>
      <div>
        <img src="../../assets/images/twoMa.png" alt="">
      </div>
    </el-card>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request/request";
export default {
  props: ["loginname"],
  data(){
    return{
      userDetail:'',
      recent_replies:'',
      recent_topics:''
    }
  },
    mounted() {
    request({
      url: `user/${this.loginname}`,
    })
      .then((res) => {
        this.userDetailHandle(res.data.data);
      })
      .catch((err) => {
        console.log(err);
      });
      
      //获取sessionStoeage里的无人回复数据
      // this.noReData=JSON.parse(sessionStorage.getItem("noReData"));
      // console.log(this.noReData);
      
      
      
      
  },
    methods:{

      userDetailHandle(res){
        this.userDetail=res;                    //用户信息
        this.recent_topics=res.recent_topics.splice(0,5);   //最近创建的话题
        this.recent_replies=res.recent_replies.splice(0,5); //最近参与的话题
        
        this.$store.commit("setUserDetail",res);//用户信息提交到vuex
      }
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>